<template>
  <div class="scroll-out-box" v-show="list.length > 0">
    <vue-seamless class="scroll-box" :data="list" :class-option="classOption">
      <div class="cursor-pointer ul-scoll-li flex align-center" v-for="(item, index) in list" :key="index" @click="goInfo(item)">
        <div class="el-icon-message-solid margin-right-10"></div>
        <div class="title flex-1">{{ item.description }}</div>
      </div>
    </vue-seamless>
  </div>
</template>

<script>
  import vueSeamless from './seamless';

  export default {
    name: 'scrollBox',
    props: {},
    computed: {
      classOption: {
        get: function () {
          return {
            direction: 1,
            singleHeight: 50,
            autoPlay: true,
            openWatch: true,
            hoverStop: true,
            waitTime: 3000, //滚动时间间隔
          };
        },
        set: function (newValue) {},
      },
    },
    watch: {
      '$store.state.notifyList': {
        handler(value) {
          this.list = value;
        },
        immediate: true,
        deep: true,
      },
    },
    data() {
      return {
        list: [],
      };
    },

    methods: {
      goInfo(row) {
        let url = '';
        let workTypeList = [1, 2, 3];
        let eventTypeList = [4, 5];
        if (workTypeList.indexOf(row.workType)) {
          url = '/businessAssets/trace/traceWork?token=7381F8A1903F4A6F85CE29CB19077F76&menuId=63a745412b374be1825b38731ca55105&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1668393039893&TAB=1&tabId=576171792873607168&infoKey=' + row.primaryKey;
        } else if (eventTypeList.indexOf(row.workType)) {
          url = '/businessAssets/trace/event?token=7381F8A1903F4A6F85CE29CB19077F76&menuId=63a745412b374be1825b38731ca55105&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1668393039893&TAB=2&tabId=576171991192883200&infoKey=' + row.primaryKey;
        }
        window.open(url);
      },
    },

    components: { vueSeamless },
  };
</script>

<style lang="scss" scoped>
  .scroll-out-box {
    width: 100%;
    height: 50px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff6ea;
    border-radius: 3px;
    border: 1px solid #f79100;
    padding: 0px 20px;
  }

  .scroll-box {
    height: 50px;
  }
  .ul-scoll-li {
    line-height: 50px;
    height: 50px;

    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
